<template>
	<view class="wrapper">
		<form @reset="formReset" @submit="formSubmit">
			<view class="cu-form-group">
				<text>*编号:</text><input v-model="NowSelectUnit.ClientCode"></input>
			</view>
			<view class="cu-form-group">
				<text>*名称:</text><input v-model="NowSelectUnit.ClientName"></input>
			</view>
			<view class="cu-form-group">
				<text>联系人:</text><input v-model="NowSelectUnit.Contacts"></input>
			</view>
			<view class="cu-form-group">
				<text>电话:</text><input v-model="NowSelectUnit.Phone"></input>
			</view>
			<view class="cu-form-group">
				<text>地址:</text><input v-model="NowSelectUnit.Address"></input>
			</view>
			<view class="cu-form-group">
				<view class="title">所属业务:</view>
				<view class="inpt1"><input type="text" placeholder="点击获取" :value="SelectOptionsObj.OperatorName" disabled="true"
					 data-target="OptionModal" @tap="showModal" />
					<view class="cu-modal" :class="modalName=='OptionModal'?'show':''">
						<view class="cu-dialog">
							<view class="cu-bar bg-white justify-end">
								<view class="content">选择业务员</view>
								<view class="action" @tap="hideModal">
									<text class="cuIcon-close text-red"></text>
								</view>
							</view>
							<view class="padding-xl">
								<view class="searchStore">
									<input placeholder="请输入业务员名称" v-model="SearchOptionName" @input="filterOption" />
									<button @tap="searchOption">搜索</button>
								</view>
								<view class="StoreListWrap">
									<view v-for="(item,index) in TempOptionList" :key="item.OperatorID" @tap="selectOptions(index)">{{item.OperatorName}}</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="cu-form-group">
				<view class="title">*客户类型:</view>
				<picker @change="IsClientChange" :value="isCilentIndex" :range="IsClient">
					<view class="picker">
						{{isCilentIndex>-1?IsClient[isCilentIndex]:'点击选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">*适用价格:</view>
				<picker @change="PriceTypeChange" :value="PriceIndex" :range="PriceType">
					<view class="picker">
						{{PriceIndex>-1?PriceType[PriceIndex]:'点击选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<view class="title">*是否停用:</view>
				<picker @change="IsStopChange" :value="IsStopIndex" :range="IsStop">
					<view class="picker">
						{{IsStopIndex>-1?IsStop[IsStopIndex]:'点击选择'}}
					</view>
				</picker>
			</view>
			<view class="cu-form-group">
				<text>备注:</text><textarea placeholder="请输入备注" v-model="NowSelectUnit.Remark"></textarea>
			</view>
			<!-- 	<view class="cu-form-group">
				<button class="cu-btn stop text-white" @tap="add" :style="{visibility:type==1?'':'hidden'}">新增</button>
				<button class="cu-btn stop text-white" @tap="change" :style="{visibility:type==0?'':'hidden'}">修改</button>
			</view> -->
			<view class="bottom">
				<button form-type="reset">清空</button>
				<button form-type="submit">{{type==0?'修改':'新增'}}</button>
			</view>
		</form>
	</view>
</template>

<script>
	import * as Api from '@/syApis/syAddOrder/syaddApis.js';
	import * as Apis from '@/syApis/syDa/syDa.js';
	export default {
		data() {
			return {
				//适用价格
				PriceType: [
					"最近价格", "进价", "零售价", "单价1", "单价2", "配送价", "会员价", "批发价"
				],
				PriceIndex: -1,
				//客户类型
				IsClient: ["供应商", "客户", "全部"],
				isCilentIndex: -1,
				//是否停用
				IsStop: ['否', '是'],
				IsStopIndex: -1,
				//业务员
				optionsList: [],
				//业务员选项
				optionsPicker: [],
				optionIndex: -1,
				NowSelectUnit: {
					ClientCode: "",
					ClientName: "",
					Contacts: "",
					Phone: "",
					EmpID: "",
					IsClient: "",
					Address: "",
					PriceType: "",
					Remark: "",
					PyNo: "",
					IsStop: ""
				},
				type: 0,
				//业务员临时数组
				TempOptionList:[],
				//当前选择的业务员条目
				SelectOptionsObj: {
					OperatorName: "",
					OperatorID: ""
				},
				OperatorList:[],
				modalName:null,
				SearchOptionName:""
			}
		},
		onLoad(options) {
			let type = options.type;
			this.type = options.type;
			//如果是修改赋值修改的信息
			if (type == 0) {
				console.log('onload执行成功')
				this.NowSelectUnit = JSON.parse(options.NowSelectUnit);
				
				console.log(this.NowSelectUnit);
				this.IsStopIndex = this.NowSelectUnit.IsStop == false ? 0 : 1;
				this.isCilentIndex = this.NowSelectUnit.IsClient;
				this.PriceIndex = this.NowSelectUnit.PriceType;
				uni.setNavigationBarTitle({
					title: "修改往来单位"
				})
			} else {

			}
			this.GetOperatorMessage();
		},
		methods: {
			filterOption(e){
				let value = e.detail.value;
				this.TempOptionList = [];
				var that = this;
				this.OperatorList.forEach((item,index)=>{
					if(item.OperatorName.indexOf(value)>-1){
						that.TempOptionList.push(item);
					}
				});
				// this.PriceIndex = 0;
				
			},
			//显示弹框
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal() {
				this.modalName = null;
			},
			//选择业务员
			selectOptions(index) {
				this.SelectOptionsObj = this.TempOptionList[index];
				this.modalName = null;
			},
			//搜索业务员
			searchOption() {
				if (this.searchOption != '') {
					let Filter = "OperatorName like '%" + this.SearchOptionName + "%'";
					this.GetOperatorMessage(Filter);
				} else {
					this.GetOperatorMessage();
				}
			},
			formReset(){
				this.NowSelectUnit 
				 this.NowSelectUnit.ClientCode = "";
				 this.NowSelectUnit.ClientName = "";
				 this.NowSelectUnit.Contacts = "";
				 this.NowSelectUnit.Phone = "";
				 this.NowSelectUnit.Address = "";
				 this.NowSelectUnit.Remark = "";
				 this.SelectOptionsObj = {
					OperatorName: "",		
					OperatorID: ""
				 },
				 this.IsStopIndex = 0;
				 this.PriceIndex = 0;
				 this.isCilentIndex = 0;
				 
			},
			formSubmit(e) {
				if (this.NowSelectUnit.ClientCode == "") {
					Apis.showTip("编号不能为空")
				} else if (this.NowSelectUnit.ClientName == "") {
					Apis.showTip("单位名称不能为空")
				}else if (this.isCilentIndex == -1) {
					Apis.showTip("请选择客户")
					return;
				} else {
					var that = this;
					let CreateID = uni.getStorageSync("UserCode");
					let Save_M_Data_Json = {};
					if (this.type == 0) {
						Save_M_Data_Json = {
							ClientCode: this.NowSelectUnit.ClientCode + "",
							ClientName: this.NowSelectUnit.ClientName + "",
							Contacts: this.NowSelectUnit.Contacts + "",
							Phone: this.NowSelectUnit.Phone + "",
							EmpID: this.SelectOptionsObj.OperatorID,
							IsClient: this.isCilentIndex + "",
							Address: this.NowSelectUnit.Address + "",
							Remark: this.NowSelectUnit.Remark + "",
							IsStop: this.IsStopIndex + "",
							CreateID: CreateID + "",
							PriceType: this.PriceIndex + "",
							ChangeID:this.NowSelectUnit.ChangeID,
							ClientID:this.NowSelectUnit.ClientID
						}
					} else {
						Save_M_Data_Json = {
							ClientID: this.NowSelectUnit.ClientID,
							ClientCode: this.NowSelectUnit.ClientCode + "",
							ClientName: this.NowSelectUnit.ClientName + "",
							Contacts: this.NowSelectUnit.Contacts + "",
							Phone: this.NowSelectUnit.Phone + "",
							EmpID: this.SelectOptionsObj.OperatorID,
							IsClient: this.isCilentIndex + "",
							Address: this.NowSelectUnit.Address + "",
							Remark: this.NowSelectUnit.Remark + "",
							IsStop: this.IsStopIndex + "",
							CreateID: CreateID + "",
							PriceType: this.PriceIndex + ""
							// ClientID:this.SelectOptionsObj.OperatorID
						}
					}

					// Save_M_Data_Json: JSON.stringify(Save_M_Data_Json),
					let data = {
						Save_M_Data_Json: JSON.stringify(Save_M_Data_Json),
					};
					var that = this;
					if (this.type == 0) {
						Apis.Update_ClientMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									Apis.showTip("登录超时");
								} else if (res.data.ErrorMsg != "") {
									Apis.showTip(res.data.ErrorMsg);
								} else {
									console.log(res.data.ResultMsg)
									Apis.showTip("提交成功");
									let data = {};
									that.$eventHub.$emit('fires', data);
								}
							} else {

							}
						});
					} else {
						Apis.Add_ClientMessage(data, function(res) {
							if (res.state) {
								if (res.data.ErrorMsg == "获取登录信息失败") {
									Apis.showTip("登录超时");
								} else if (res.data.ErrorMsg != "") {
									Apis.showTip(res.data.ErrorMsg);
								} else {
									Apis.showTip("提交成功");
									let data = {};
									that.$eventHub.$emit('fires', data);
								}
							} else {

							}
						});
					}
				}
			},
			optionsPickerChange(e) {
				console.log(e);
				if (e.detail.value == -1) {
					this.optionIndex = 0;
				} else {
					this.optionIndex = e.detail.value;
				}
			},
			IsClientChange(e) {
				if (e.detail.value == -1) {
					this.isCilentIndex = 0;
				} else {
					this.isCilentIndex = e.detail.value;
				}
			},
			PriceTypeChange(e) {
				if (e.detail.value == -1) {
					this.PriceIndex = 0;
				} else {
					this.PriceIndex = e.detail.value;
				}
			},
			IsStopChange(e) {
				if (e.detail.value == -1) {
					this.IsStopIndex = 0;
				} else {
					this.IsStopIndex = e.detail.value;
				}
			},
			//获取业务员列表
			GetOperatorMessage(Filter="") {
				let data = {
					Filter: Filter
				}
				this.optionsPicker = [];
				var that = this;
				Api.GetOperatorMessage(data, function(res) {
					if (res.state) {
						if (res.data.ErrorMsg == "获取登录信息失败") {
							Api.showTip("登录超时");
						} else if (res.data.ErrorMsg != "") {
							Api.showTip(res.data.ErrorMsg);
						} else {
							let responseData = res.data.ResultMsg;
							responseData.forEach((item,index)=>{
								if(item.OperatorID == that.NowSelectUnit.EmpID){
									that.SelectOptionsObj = item;
									return;
								}
							})
							if(Filter==""){
								that.TempOptionList = responseData;
								that.OperatorList = responseData;
							}else{
								that.TempOptionList = responseData;
							}
							
						}
					} else {

					}
				});
			}
		}
	}
</script>

<style>
	.title1 {
		font-size: 15px;
	}

	.bottom {
		display: flex;
		flex: 1;
		position: fixed;
		bottom: 0;
		width: 100%;
	}

	.bottom button {
		width: 50%;
		background: rgba(124, 170, 216, 1);
		color: #FFFFFF;
		border-radius: 0;
		border: 1rpx #F1F1F1;
	}
	.padding-xl .searchStore {
		display: flex;
		width: 100%;
		margin: auto;
		height: 45px;
		padding-top: 5px;
		font-size: 14px;
	}
	
	.padding-xl .searchStore input {
		flex: 1;
		height: 35px;
		border: 1px solid #CCC;
		border-top-left-radius: 5px;
		border-bottom-left-radius: 5px;
		padding-left: 10px;
	}
	
	.padding-xl {
		padding: 10px;
	
	}
	
	.padding-xl .searchStore button {
		font-size: 14px;
		color: #FFF;
		padding-left: 8px;
		padding-right: 8px;
		height: 35px;
		line-height: 35px;
		border-radius: 0px;
		border-top-right-radius: 5px;
		border-bottom-right-radius: 5px;
		text-align: center;
		background: rgba(124, 170, 216, 1);
	}
	
	.padding-xl .StoreListWrap {
		height: 250px;
		overflow: auto;
	}
	
	.padding-xl .StoreListWrap view {
		height: 40px;
		line-height: 40px;
		text-align: left;
		border-bottom: 1px solid #CCC;
		padding-left: 8px;
	}
	.padding-xl .GoodsListWrap{
		height: 250px;
		overflow: auto;
	}
	.padding-xl .GoodsListWrap view{
		height: 40px;
		padding:3px;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 5px;
	}
	.padding-xl .GoodsListWrap view image{
		width: 40px;
		height: 40px;
	}
	.padding-xl .GoodsListWrap view text{
		flex: 1;
		height: 40px;
		text-align: left;
		padding-left: 10px;
		box-sizing: border-box;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}
	.inpt1{
		flex: 1;
		text-align: right;
	}
</style>
